<template>
  <div style="padding: 10px;">
    <Row :space="15">
      <Cell>
        <Input v-model="formData.name" placeholder="节点名称" style="width: 100%;" />
      </Cell>
      <Cell>
        <div class="h-input-group" style="width: 400px">
          <div class="h-input-addon" style="width: 145px">
            <AutoComplete v-model="formData.startCondition" :mustMatch="false" type="title" :datas="parameters"
              placeholder="条件表达式" />
          </div>
          <div class="h-input-addon" style="width: 90px">
            <Select v-model="formData.expression" :datas="expressions" :no-border="true" :deletable="false"></Select>
          </div>
          <div class="h-input-addon" style="width: 145px">
            <AutoComplete v-model="formData.endCondition" :mustMatch="false" type="title" :datas="parameters"
              placeholder="条件表达式" />
          </div>
        </div>
      </Cell>

      <Cell>
        <div class="h-input-group" style="width: 400px">
          <div class="h-input-addon" style="width: 100px">
            <Select v-model="formData.forType" :datas="forType" @change="forTypeSelect" :no-border="true"
              :deletable="false"></Select>
          </div>
          <div class="h-input-addon" style="width: 200px">
            <AutoComplete v-model="formData.forData" :mustMatch="false" type="title" :datas="parameters"
              placeholder="循环变量" />
          </div>
          <div class="h-input-addon" style="width: 80px">
            <NumberInput type="text" v-model="formData.forSize" placeholder="次数" />
          </div>
        </div>
        <Space :width="15" />
      </Cell>
      <Cell>
        <Button color="primary" @click="bindForm">设置</Button>
        <Space :width="15" />
        <Button @click="setForm" color="yellow">重置</Button>
      </Cell>
    </Row>
  </div>
</template>

<script>
import LogicFlow from '@logicflow/core';
import { message } from 'heyui';

export default {
  props: {
    lf: Object,
    currentNode: Object,
  },
  mounted() {
    this.setForm();
    this.getParameters();
  },
  data() {
    return {
      forType: [
        { label: "开始位置", value: '1' },
        { label: "结束位置", value: '2' },
        { label: "默认关闭", value: '0' },
      ],
      expressions: [
        { label: "==", value: "=" },
        { label: "!=", value: "!=" },
        { label: ">", value: ">" },
        { label: ">=", value: ">=" },
        { label: "<", value: "<" },
        { label: "<=", value: "<=" },
        { label: "包含", value: "include" },
        { label: "不包含", value: "exclusive" },
        { label: "以*开始", value: "startWith" },
        { label: "以*结束", value: "endWith" },
        { label: "大小", value: "size" },
      ],
      parameters: [],
      formData: {
        forType: "",
        startCondition: "",
        endCondition: "",
        expression: "=",
      }
    }
  },
  methods: {
    setForm() {
      let id = this.$props.currentNode.data.id;
      let properties = this.$props.lf.getProperties(id);
      this.formData.id = id;
      this.formData.name = properties.name;
      if (!!properties.forType) {
        this.formData.forType = properties.forType;
      }
      this.formData.forData = properties.forData;
      this.formData.forSize = properties.forSize;
      this.formData.startCondition = properties.startCondition;
      this.formData.endCondition = properties.endCondition;
      if (!!properties.expression) {
        this.formData.expression = properties.expression;
      }
    },
    bindForm() {
      let id = this.$props.currentNode.data.id;
      this.$props.lf.updateText(id, this.formData.name);
      this.$props.lf.setProperties(id, this.formData);
      this.$emit('close', false);
      message.success("设置成功");
    },
    forTypeSelect(data) {
      if (data.value == '1') {
        this.formData.name = "循环开始";
      } else if (data.value == '2') {
        this.formData.name = "循环结束";
      } else if (data.value == '0') {
        this.formData.name = "";
      }
    },

    getParameters() {
      let flowData = (this.$props.lf).getGraphRawData();
      let nodes = flowData["nodes"];
      let node = this.getStartNode(flowData);
      while (!!node && node?.id != this.$props.currentNode?.data?.id && node?.type != 'EndNode') {
        var properties = node?.properties;
        var name = properties?.name;
        var parameterName = properties?.parameterName;

        if (!!parameterName) {
          if (properties?.inputHistory == true) {
            this.parameters.push({ label: "$" + parameterName + ".input", value: "$" + parameterName + ".input" });
          } if (properties?.resultHistory == true) {
            this.parameters.push({ label: "$" + parameterName + ".output", value: "$" + parameterName + ".output" });
          }
        }
        node = this.getNextNode(flowData, node.id);
      }
    },
    getStartNode(flowData) {
      let nodes = flowData["nodes"];
      for (var i = 0; i < nodes.length; i++) {
        let node = nodes[i];
        if (node.type == 'StartNode') {
          return node;
        }
      }
    },
    getNode(flowData, id) {
      let nodes = flowData["nodes"];
      for (var i = 0; i < nodes.length; i++) {
        let node = nodes[i];
        if (node.id == id) {
          return node;
        }
      }
    },
    getNextNode(flowData, id) {
      let edges = flowData["edges"]
      for (var i = 0; i < edges.length; i++) {
        let edge = edges[i];
        if (edge.sourceNodeId == id) {
          return this.getNode(flowData, edge.targetNodeId);
        }
      }
    },
  }
}
</script>